<template>
    <div class="app-container">
        <el-row>
            <el-form :inline="true">
                <el-col :xs="24" :sm="6" :md="6" :lg="8">
                    <el-form-item label="审核状态">
                        <label>{{auditstatus}}</label>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="18" :md="18" :lg="16">
                    <el-form-item class="checkbtn">
                        <span class="tips">{{tips}} &nbsp;&nbsp;</span>
                        <el-button @click="auditArchiveInfo(2)" v-show="status === 1 || status === 0 ? true:false"><icon-svg icon-class="save"></icon-svg>&nbsp;&nbsp;审核通过</el-button>
                        <el-button @click="auditArchiveInfo(1)" v-show="status === 1 || status === 0 ? true:false"><icon-svg icon-class="del"></icon-svg>&nbsp;&nbsp;审核不通过</el-button>
                        <el-button @click="backToList()"><icon-svg icon-class="undo"></icon-svg>&nbsp;&nbsp;返回列表</el-button>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <el-row>
            <el-form>
                <el-col :xs="24" :sm="12" :md="6" :lg="5">
                    <el-form-item>
                        <img v-if="picture" :src="picture" class="avatarImg">
                        <div v-else class="noimage">产品照片</div>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="10" :lg="13">
                    <el-form-item>
                        <div class="productTitle">{{productionname}}</div>
                    </el-form-item>
                    <el-form-item label="产品规格">
                        <div class="itemContent">{{productionspec}}</div>
                    </el-form-item>
                    <el-form-item label="产品品牌">
                        <div class="itemContent">{{productionbrand}}</div>
                    </el-form-item>
                    <el-form-item label="生产日期">
                        <div class="itemContent">{{productiondate}}</div>
                    </el-form-item>
                    <el-form-item label="食卫证号">
                        <div class="itemContent">{{fhcertificateno}}</div>
                    </el-form-item>
                    <el-form-item label="产品批准号">
                        <div class="itemContent">{{productionstandardno}}</div>
                    </el-form-item>
                    <el-form-item label="卫生许可证号">
                        <div class="itemContent">{{productionlicenceno}}</div>
                    </el-form-item>
                    <el-form-item label="质量负责人">
                        <div class="itemContent">{{qualitymanager}}</div>
                    </el-form-item>
                    <el-form-item label="主要营养成分">
                        <div class="itemContent">{{mainnutrients}}</div>
                    </el-form-item>
                    <el-form-item label="食品添加剂">
                        <div class="itemContent">{{foodadditives}}</div>
                    </el-form-item>
                    <el-form-item label="生产地址">
                        <div class="itemContent">{{productionAddressDetail}}</div>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="5">
                    <el-form-item>
                        <div class="fakeNumber">
                            <span>追溯码扫描次数 {{traceNoScanTimes?traceNoScanTimes:0}} &nbsp;&nbsp;验证码数量: {{fakeNoScanTimes?fakeNoScanTimes:0}}</span>
                        </div>
                        <img v-if="twodimensioncodepath" :src="twodimensioncodepath" class="avatar imgQR">
                        <div v-else class="noimage">暂无产品二维码</div>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <el-row>
            <section class="productFlow">
                <div class="container">
                    <div class="productFlowTitle">产销过程</div>
                    <el-row>
                        <el-col :xs="24" :sm="12" :md="6" :lg="6">
                            <img v-if="imageProcess" :src="imageProcess" class="imageProcess">
                            <div v-else class="noimage">暂无产销过程图片</div>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="6" :lg="18">
                            <el-row>
                                <el-form :inline="true">
                                    <el-form-item v-for="(process,index) in marketingProcessList" :key="process.id" :value="process.id">
                                        <el-button class="process" type="text" @click="showProcessInfo(index)">{{process.stepname}}</el-button>
                                        <span v-show="index < marketingProcessList.length-1">
                                            <img src="../../assets/archives/jiantou.png">
                                        </span>
                                    </el-form-item>
                                </el-form>
                            </el-row>
                            <el-row>
                                <el-form :inline="true">
                                    <el-form-item>
                                        <div style="padding-top:10px;"><img src="../../assets/archives/shenchanshikuang.png"></div>
                                    </el-form-item>
                                </el-form>
                            </el-row>
                        </el-col>
                    </el-row>
                </div>
            </section>
        </el-row>
        <el-row>
            <section class="authentication">
                <div class="container">
                    <div class="authenticationTitle">产品认证</div>
                    <el-row>
                        <el-col :xs="24" :sm="12" :md="6" :lg="17">
                            <el-row>
                                <el-form :inline="true">
                                    <el-form-item v-for="(productionAuthentication,index) in productionAuthenticationList" 
                                        :key="productionAuthentication.id" :value="productionAuthentication.paid">
                                        <img class="productCertificationMarkPicture" 
                                        v-bind:class="{ isFrameBorder: isCurSelectAuthenticate === productionAuthentication.paid}"
                                        :src="productionAuthentication.productCertificationMarkPicture" @click="showProductionAuthentication(index)">
                                    </el-form-item>
                                </el-form>
                            </el-row>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="6" :lg="6">
                            <img v-if="imageProductionAuthentication" :src="imageProductionAuthentication" class="bigProductCertificationMarkPicture">
                            <div v-else class="noimage">暂无产品认证图片</div>
                        </el-col>
                    </el-row>
                </div>
            </section>
        </el-row>
        <el-row>
            <div class="container">
                <div v-html="description" class="descriptionInfo"></div>
            </div>
        </el-row>
        <el-row>
            <section class="enterpriseInfo">
                <div class="container">
                    <div class="enterpriseTitle">企业信息</div>
                </div>
                <el-row>
                    <el-form label-width="250px">
                        <div class="enterpriseInfoContent"> 企业名称（制造商）&nbsp;&nbsp;&nbsp;&nbsp;{{enterprisename}} </div>
                        <div class="enterpriseInfoContent"> 产品品牌 &nbsp;&nbsp;&nbsp;&nbsp;{{productionbrand}} </div>
                        <div class="enterpriseInfoContent"> 法定地址 &nbsp;&nbsp;&nbsp;&nbsp;{{enterpriseAddressDetail}} </div>
                        <div class="enterpriseInfoContent"> 电话 &nbsp;&nbsp;&nbsp;&nbsp;{{enterprisephone}} </div>
                        <div class="enterpriseInfoContent"> 网址 &nbsp;&nbsp;&nbsp;&nbsp;{{website}} </div>
                        <div class="enterpriseInfoContent">企业简介 &nbsp;&nbsp;&nbsp;&nbsp;{{enterpriseprofile}} </div>
                    </el-form>
                </el-row>
            </section>
        </el-row>
        <el-row>
            <section class="authentication">
                <div class="container">
                    <div class="authenticationTitle">企业资质</div>
                    <el-row>
                        <el-col :xs="24" :sm="12" :md="6" :lg="17">
                            <el-row>
                                <el-form :inline="true">
                                    <el-form-item v-for="(enterpriseQualification,index) in enterpriseQualificationsList" 
                                            :key="enterpriseQualification.id" 
                                            :value="enterpriseQualification.id">
                                        <img class="productCertificationMarkPicture"  
                                         v-bind:class="{ isFrameBorder: isCurSelectQualification === enterpriseQualification.id}"                                          
                                         :src="enterpriseQualification.enterpriseCertificationMarkPicture" @click="showEnterpriseQualification(index)">
                                    </el-form-item>
                                </el-form>
                            </el-row>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="6" :lg="6">
                            <img v-if="imageEnterpriseQualification" :src="imageEnterpriseQualification" class="bigProductCertificationMarkPicture">
                            <div v-else class="noimage">暂无企业资质图片</div>
                        </el-col>
                    </el-row>
                </div>
            </section>
        </el-row>
    </div>
</template>

<style scoped>
.operateBtn {
    text-align: center;
    margin: 0 auto;
}

.tips {
    font-size: 14px;
    color: red;
}

.checkbtn {
    float: right;
    padding-bottom: 15px;
}

.noimage {
    border: 1px dashed rgb(234, 238, 251);
    height: 200px;
    width: 300px;
    padding: 80px 80px;
    margin-left: 15px;
}

.productTitle {
    font-size: 20px;
    color: #000;
    font-weight: bold;
}

.el-form-item {
    margin-bottom: 0px;
}

.fakeNumber {
    background-color: #e9eef6;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 5px;
    width: 300px;
    text-align: center;
}

.productFlow {
    background-color: #cea36d;
    color: #fff;
    padding: 2px 0px;
}

.container {
    padding-right: 15px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15px;
}

.productFlowTitle {
    margin: 10px 5px;
    background-repeat: no-repeat;
    padding: 0px 0 5px 40px;
    font-size: 20px;
    background-image: url(../../assets/archives/cxgc.png);
}

.avatar {
    width: 200px;
    height: 178px;
    display: block;
}

.avatarImg {
    width: 260px;
    height: 260px;
    display: block;  
}

.imgQR {
    margin: 5px 45px;
}

.process {
    padding: 10px 10px;
    background-color: #cea36d;
    box-shadow: none;
    border: 1px solid white;
    color: white;
}

.authenticationTitle {
    margin: 10px 0px;
    background-repeat: no-repeat;
    padding: 0 0 5px 40px;
    font-size: 20px;
    background-image: url(../../assets/archives/renzhen.png);
}

.imageProcess {
    width: 250px;
    height: 178px;
    display: block;
    margin-left: 15px;
}

.productCertificationMarkPicture {
    float: left;
    /* margin: 20px 0 20px 4%; */
    text-align: center;
    height: 120px;
    width: 130px;
    cursor: pointer;
    /* border: 1px solid red; */
}

.isFrameBorder {
   border: 2px solid #20a0ff; 
}

.bigProductCertificationMarkPicture {
    width: 350px;
    height: 350px;
    display: block;
    margin-left: 15px;
}

.enterpriseTitle {
    margin: 10px 10px;
    background-repeat: no-repeat;
    padding: 0 5px 5px 40px;
    font-size: 20px;
    background-image: url(../../assets/archives/qiye.png);
}

.descriptionInfo {
    text-align: center;
}

.enterpriseInfo {
    background-color: #54ad52;
    color: #fff;
    padding: 20px 5px;
}

.enterpriseInfoContent {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin-left: 15px;
    padding: 5px 5px;
}

.itemContent {
   word-wrap:break-word
}

</style>

<script>
import { getArchiveInfoById, auditArchive } from 'api/archive';

export default {
    data() {
        return {
            archiveid: '',
            auditstatus: '',
            status: 0,
            productionname: '',
            productionspec: '',
            productionbrand: '',
            twodimensioncodepath: '',
            picture: '',
            createdate: '',
            productiondate: '',
            fhcertificateno: '',
            productionstandardno: '',
            productionlicenceno: '',
            qualitymanager: '',
            mainnutrients: '',
            foodadditives: '',
            productionAddress: '',
            traceNoScanTimes: '',
            fakeNoScanTimes: '',
            marketingProcessList: [],
            productionAuthenticationList: [],
            enterpriseInfo: null,
            enterpriseQualificationsList: [],
            imageUrlLogo: 'http://139.129.216.241/resources/trace/image/temp/1504073025991.jpg',
            tips: '',
            jiantou: 'http://139.129.216.241/trace/img/product/jiantou.png',
            showarrow: false,
            imageProcess: '',
            imageProductionAuthentication: '',
            description: '',
            enterprisename: '',
            productionbrand: '',
            productionAddressDetail: '',
            enterpriseAddressDetail: '',
            enterprisephone: '',
            website: '',
            enterpriseprofile: '',
            imageEnterpriseQualification: '',   
            isCurSelectAuthenticate: 0,
            isCurSelectQualification: 0,    
        }
    },
    created() {
        // 表单初始化
        this.archiveid = this.$route.query.archiveid;
        // this.archiveid = 30;
        this.auditstatus = this.$route.query.auditstatus;
        // 获取删除状态
        this.deleted = this.$route.query.deleted
        this.fetchData();
    },
    methods: {
        // 查询产品档案数据     
        fetchData() {
            let requestParam = {
                id: this.archiveid
            };
            getArchiveInfoById(requestParam).then(response => {
                let res = response.data;
                if (res.flag === 1) {
                    // console.log(res.data);
                    let archiveInfo = res.data;
                    if (!archiveInfo) return;
                    this.archiveid = archiveInfo.id;
                    this.auditstatus = archiveInfo.auditstatus;
                    this.status = archiveInfo.status;
                    this.productionname = archiveInfo.productionname;
                    this.productionspec = archiveInfo.productionspec;
                    this.productionbrand = archiveInfo.productionbrand;
                    this.picture = archiveInfo.picture;
                    this.twodimensioncodepath = archiveInfo.twodimensioncodepath;
                    this.productiondate = archiveInfo.productiondate;
                    this.createdate = archiveInfo.createdate;
                    this.fhcertificateno = archiveInfo.fhcertificateno;
                    this.productionstandardno = archiveInfo.productionstandardno;
                    this.productionlicenceno = archiveInfo.productionlicenceno;
                    this.qualitymanager = archiveInfo.qualitymanager;
                    this.mainnutrients = archiveInfo.mainnutrients;
                    this.foodadditives = archiveInfo.foodadditives;
                    this.productionAddressDetail = archiveInfo.productionAddressDetail;
                    this.traceNoScanTimes = archiveInfo.traceNoScanTimes;
                    this.fakeNoScanTimes = archiveInfo.fakeNoScanTimes;
                    this.marketingProcessList = archiveInfo.marketingProcessList;
                    this.productionAuthenticationList = archiveInfo.productionAuthenticationList;
                    this.enterpriseInfo = archiveInfo.enterpriseInfo;
                    this.enterpriseQualificationsList = archiveInfo.enterpriseQualificationsList;                 
                    if (archiveInfo.marketingProcessList) {
                        this.imageProcess = archiveInfo.marketingProcessList[0].resourcepath || '';                        
                    };                 
                    if (archiveInfo.productionAuthenticationList) {
                        this.imageProductionAuthentication = archiveInfo.productionAuthenticationList[0].productCertificationPicture || '';
                        this.isCurSelectAuthenticate = this.productionAuthenticationList[0].paid || '';
                    };
                    this.description = archiveInfo.description || '';
                    this.enterprisename = archiveInfo.enterpriseInfo.enterprisename || '';
                    this.productionbrand = archiveInfo.enterpriseInfo.productionbrand || '';
                    this.enterpriseAddressDetail = archiveInfo.enterpriseInfo.enterpriseAddressDetail || '';
                    this.enterprisephone = archiveInfo.enterpriseInfo.enterprisephone || '';
                    this.website = archiveInfo.enterpriseInfo.website || '';
                    this.enterpriseprofile = archiveInfo.enterpriseInfo.enterpriseprofile || '';                   
                    if (archiveInfo.enterpriseQualificationsList) {
                       this.imageEnterpriseQualification = archiveInfo.enterpriseQualificationsList[0].enterpriseCertificationPicture || '';
                       this.isCurSelectQualification = this.enterpriseQualificationsList[0].id || '';   
                    };                    
                } else {
                    console.log('产品档案查询失败.');
                }
            })
        },
        // 审核企业信息
        auditArchiveInfo(status) {
            let requestParam = {
                id: this.archiveid,
                status: status
            };
            auditArchive(requestParam).then(response => {
                let res = response.data;
                if (res.flag === 1) {
                    this.status = status;
                    this.auditstatus = status === 2?'已通过':(status === 1?'未通过':'未审核');
                    this.$message({
                        showClose: true,
                        message: '审核档案信息成功',
                        type: 'success'
                    });
                } else {
                    this.$message({
                        showClose: true,
                        message: '审核档案信息失败',
                        type: 'error'
                    });
                }
            });
        },
        backToList() {
            this.$router.go(-1)
        },
        showProcessInfo(index) {
            this.imageProcess = this.marketingProcessList[index].resourcepath;
        },
        showProductionAuthentication(index) {
            this.isCurSelectAuthenticate = this.productionAuthenticationList[index].paid;
            this.imageProductionAuthentication = this.productionAuthenticationList[index].productCertificationPicture;
        },
        showEnterpriseQualification(index) {   
            this.isCurSelectQualification = this.enterpriseQualificationsList[index].id;        
            this.imageEnterpriseQualification = this.enterpriseQualificationsList[index].enterpriseCertificationPicture;
        },
    }
};
</script>